<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Probably the most complete UI kit out there. Multiple functionalities and controls added,  extended color palette and beautiful typography, designed as its own extended version of Bootstrap at  the highest level of quality.                             ">
    <meta name="author" content="Webpixels">
    <title>Boomerang UI Kit - Free Bootstrap Framework by Webpixels</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet">
    <!-- Plugins -->
    <link rel="stylesheet" href="../assets/vendor/animate/animate.min.css" type="text/css">
    <!-- Theme CSS -->
    <link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
    <!-- Demo CSS - No need to use these in your project -->
    <link rel="stylesheet" href="../assets/vendor/jquery-scrollbar/css/jquery-scrollbar.css">
    <link type="text/css" href="../assets/vendor/highlight/css/highlight.min.css" rel="stylesheet">
    <link type="text/css" href="../assets/css/demo.css" rel="stylesheet">
  </head>
  <body>
    <main class="main">
      <aside class="sidebar" id="nav_docs">
        <div class="sidebar-brand">
          <h1 class="font-weight-400"><a href="../"><span class="font-weight-700">Boomerang</span> UI Kit</a></h1>
        </div>
        <div class="scrollbar-inner">
          <ul class="navigation pr-3">
            <li class="navigation-title">Getting started</li>
            <li class="navigation-item">
              <a href="introduction.html" class="navigation-link">Introduction</a>
            </li>
            <li class="navigation-item">
              <a href="file-structure.html" class="navigation-link">File structure</a>
            </li>
            <li class="navigation-item">
              <a href="plugins.html" class="navigation-link">Plugins</a>
            </li>
            <li class="navigation-item">
              <a href="customization.html" class="navigation-link">Customization</a>
            </li>
            <li class="navigation-item">
              <a href="update.html" class="navigation-link">Update</a>
            </li>
            <li class="navigation-title">Design elements</li>
            <li class="navigation-item">
              <a href="colors.html" class="navigation-link">Colors</a>
            </li>
            <li class="navigation-item">
              <a href="typography.html" class="navigation-link">Typography</a>
            </li>
            <li class="navigation-item">
              <a href="icons.html" class="navigation-link">Icons</a>
            </li>
            <li class="navigation-title">Components</li>
            <li class="navigation-item">
              <a href="alerts.html" class="navigation-link">Alerts</a>
            </li>
            <li class="navigation-item">
              <a href="avatars.html" class="navigation-link">Avatars</a>
            </li>
            <li class="navigation-item">
              <a href="badges.html" class="navigation-link">Badges</a>
            </li>
            <li class="navigation-item">
              <a href="buttons.html" class="navigation-link">Buttons</a>
            </li>
            <li class="navigation-item">
              <a href="cards.html" class="navigation-link">Cards</a>
            </li>
            <li class="navigation-item">
              <a href="dropdowns.html" class="navigation-link">Dropdowns</a>
            </li>
            <li class="navigation-item">
              <a href="forms.html" class="navigation-link">Forms</a>
            </li>
            <li class="navigation-item">
              <a href="modal.html" class="navigation-link">Modal</a>
            </li>
            <li class="navigation-item">
              <a href="navbar.html" class="navigation-link">Navbar</a>
            </li>
            <li class="navigation-item">
              <a href="navs.html" class="navigation-link">Navs</a>
            </li>
            <li class="navigation-item">
              <a href="pagination.html" class="navigation-link">Pagination</a>
            </li>
            <li class="navigation-item">
              <a href="progress.html" class="navigation-link">Progress</a>
            </li>
            <li class="navigation-item">
              <a href="tables.html" class="navigation-link">Tables</a>
            </li>
            <li class="navigation-item">
              <a href="tooltips.html" class="navigation-link">Tooltips</a>
            </li>
          </ul>
        </div>
      </aside>
      <section class="content">
        <div class="header">
          <div class="navigation-trigger d-xl-none" data-action="aside-open" data-target=".sidebar">
            <div class="navigation-trigger-inner">
              <i class="navigation-trigger-line"></i>
              <i class="navigation-trigger-line"></i>
              <i class="navigation-trigger-line"></i>
            </div>
          </div>
          <div class="header-brand d-xl-none">
            <h1><a href="index.html">Boomerang UI Kit</a></h1>
          </div>
          <div class="header-nav ml-auto">
            <ul class="nav align-items-center">
              <li class="nav-item d-none d-md-inline-block">
                <a class="nav-link pl-0 active" href="../">Go to UI Kit</a>
              </li>
              <li class="nav-item d-none d-md-inline-block">
                <a class="nav-link" href="../docs/changelog.html">Changelog</a>
              </li>
              <li class="nav-item ml-4">
                <a href="https://github.com/webpixels/boomerang-ui-kit/archive/master.zip" class="btn btn-sm btn-primary">Download Free</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="content-inner content-docs">
          <div class="container">
            <div class="pt-3 pb-4 mb-4 border-bottom">
              <div class="row">
                <div class="col-lg-6">
                  <h2 class="heading h2 font-weight-bold">Dropdowns</h2>
                  <p>Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.</p>
                  <a href="http://getbootstrap.com/docs/4.0/components/dropdowns" target="_blank">Open Bootstrap Docs</a>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-9">
                <h3 id="example">Example</h3>
                <div class="code-example">
                  <div class="dropdown">
                    <button class="btn btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Dropdown
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                  </div>
                  <div class="btn-group">
                    <button type="button" class="btn btn-outline-danger">Split button</button>
                    <button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                  </div>
                  <div class="dropdown">
                    <button class="btn btn-outline-primary" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="fas fa-ellipsis-h"></i>
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                  </div>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
        Dropdown
    <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Action<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Another action<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Something else here<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-danger"</span><span class="nt">&gt;</span>Split button<span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-danger dropdown-toggle dropdown-toggle-split"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Toggle Dropdown<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Action<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Another action<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Something else here<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span><span class="nt">&gt;&lt;/div&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Separated link<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-ellipsis-h"</span><span class="nt">&gt;&lt;/i&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Action<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Another action<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Something else here<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                </div>
                <h3 id="variations">Variations</h3>
                <div class="code-example">
                  <!-- User account -->
                  <div class="dropdown">
                    <button class="btn btn-primary btn-icon-only rounded-circle" type="button" id="dropdown_user_account" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <span class="btn-inner--icon">
                        <i class="fas fa-user"></i>
                      </span>
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdown_user_account">
                      <h6 class="dropdown-header">User menu</h6>
                      <a class="dropdown-item" href="#">
                        <span class="float-right badge badge-primary">4</span>
                        <i class="fas fa-envelope text-primary"></i>Messages
                      </a>
                      <a class="dropdown-item" href="#">
                        <i class="fas fa-cog text-primary"></i>Settings
                      </a>
                      <div class="dropdown-divider" role="presentation"></div>
                      <a class="dropdown-item" href="#">
                        <i class="fas fa-sign-out-alt text-primary"></i>Sign out
                      </a>
                    </div>
                  </div>
                  <!-- Notifications -->
                  <div class="dropdown">
                    <button class="btn btn-secondary btn-icon dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <span class="btn-inner--icon">
                        <i class="fas fa-bell"></i>
                      </span>
                      <span class="btn-inner--text">Notifications</span>
                    </button>
                    <div class="dropdown-menu dropdown-menu-xl py-0">
                      <div class="py-3 px-3">
                        <h5 class="heading h6 mb-0">Notifications</h5>
                      </div>
                      <div class="list-group">
                        <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                          <div class="list-group-img">
                            <span class="avatar bg-purple">JD</span>
                          </div>
                          <div class="list-group-content">
                            <div class="list-group-heading">Johnyy Depp <small>10:05 PM</small></div>
                            <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                          </div>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                          <div class="list-group-img">
                            <span class="avatar bg-pink">TC</span>
                          </div>
                          <div class="list-group-content">
                            <div class="list-group-heading">Tom Cruise <small>11:30 PM</small></div>
                            <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                          </div>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                          <div class="list-group-img">
                            <span class="avatar bg-blue">WS</span>
                          </div>
                          <div class="list-group-content">
                            <div class="list-group-heading">Will Smith <small>15:45 PM</small></div>
                            <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                          </div>
                        </a>
                      </div>
                      <div class="py-3 text-center">
                        <a href="#" class="link link-sm link--style-3">View all notifications</a>
                      </div>
                    </div>
                  </div>
                  <!-- Inverse dropdown -->
                  <div class="dropdown">
                    <button class="btn btn-dark dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Inverse dropdown</button>
                    <div class="dropdown-menu dropdown-menu-inverse">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                  </div>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- User account --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-icon-only rounded-circle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"dropdown_user_account"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;</span>
        	<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-user"</span><span class="nt">&gt;&lt;/i&gt;</span>
        <span class="nt">&lt;/span&gt;</span> 
    <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdown_user_account"</span><span class="nt">&gt;</span>
    	<span class="nt">&lt;h6</span> <span class="na">class=</span><span class="s">"dropdown-header"</span><span class="nt">&gt;</span>User menu<span class="nt">&lt;/h6&gt;</span>
    	<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
    		<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"float-right badge badge-primary"</span><span class="nt">&gt;</span>4<span class="nt">&lt;/span&gt;</span>
    		<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-envelope text-primary"</span><span class="nt">&gt;&lt;/i&gt;</span>Messages
    	<span class="nt">&lt;/a&gt;</span>
    	<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
    		<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-cog text-primary"</span><span class="nt">&gt;&lt;/i&gt;</span>Settings
    	<span class="nt">&lt;/a&gt;</span>
    	<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;&lt;/div&gt;</span>
    	<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
    		<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-sign-out-alt text-primary"</span><span class="nt">&gt;&lt;/i&gt;</span>Sign out
    	<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="c">&lt;!-- Notifications --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-icon dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"dropdownMenuButton"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;</span>
        	<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-bell"</span><span class="nt">&gt;&lt;/i&gt;</span>
        <span class="nt">&lt;/span&gt;</span> 
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--text"</span><span class="nt">&gt;</span>Notifications<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-xl py-0"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"py-3 px-3"</span><span class="nt">&gt;</span>
        	<span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"heading h6 mb-0"</span><span class="nt">&gt;</span>Notifications<span class="nt">&lt;/h5&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action d-flex align-items-center"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-img"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar bg-purple"</span><span class="nt">&gt;</span>JD<span class="nt">&lt;/span&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-content"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-heading"</span><span class="nt">&gt;</span>Johnyy Depp <span class="nt">&lt;small&gt;</span>10:05 PM<span class="nt">&lt;/small&gt;&lt;/div&gt;</span>
                    <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-sm"</span><span class="nt">&gt;</span>Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor<span class="nt">&lt;/p&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/a&gt;</span>
        	<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action d-flex align-items-center"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-img"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar bg-pink"</span><span class="nt">&gt;</span>TC<span class="nt">&lt;/span&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-content"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-heading"</span><span class="nt">&gt;</span>Tom Cruise <span class="nt">&lt;small&gt;</span>11:30 PM<span class="nt">&lt;/small&gt;&lt;/div&gt;</span>
                    <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-sm"</span><span class="nt">&gt;</span>Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor<span class="nt">&lt;/p&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/a&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action d-flex align-items-center"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-img"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar bg-blue"</span><span class="nt">&gt;</span>WS<span class="nt">&lt;/span&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-content"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-heading"</span><span class="nt">&gt;</span>Will Smith <span class="nt">&lt;small&gt;</span>15:45 PM<span class="nt">&lt;/small&gt;&lt;/div&gt;</span>
                    <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-sm"</span><span class="nt">&gt;</span>Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor<span class="nt">&lt;/p&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"py-3 text-center"</span><span class="nt">&gt;</span>
        	<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"link link-sm link--style-3"</span><span class="nt">&gt;</span>View all notifications<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="c">&lt;!-- Inverse dropdown --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
	<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-dark dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>Inverse dropdown<span class="nt">&lt;/button&gt;</span>
	<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-inverse"</span><span class="nt">&gt;</span>
		<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Action<span class="nt">&lt;/a&gt;</span>
		<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Another action<span class="nt">&lt;/a&gt;</span>
		<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Something else here<span class="nt">&lt;/a&gt;</span>
	<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                </div>
                <h3 id="sizing">Sizing</h3>
                <div class="code-example">
                  <!-- Large dropdown -->
                  <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdown_large" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Large dropdown
                    </button>
                    <div class="dropdown-menu dropdown-menu-lg" aria-labelledby="dropdown_large">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                  </div>
                  <!-- Small dropdown -->
                  <div class="dropdown">
                    <button class="btn btn-sm btn-primary dropdown-toggle" type="button" id="dropdown_small" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Small dropdown
                    </button>
                    <div class="dropdown-menu dropdown-menu-sm" aria-labelledby="dropdown_small">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                  </div>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Large dropdown --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"dropdown_large"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
        Large dropdown
    <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-lg"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdown_large"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Action<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Another action<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Something else here<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="c">&lt;!-- Small dropdown --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-primary dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"dropdown_small"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
        Small dropdown
    <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-sm"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdown_small"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Action<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Another action<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Something else here<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                </div>
              </div>
              <div class="col-lg-3 d-none d-lg-inline-block">
                <div class="sidebar-sticky" data-stick-in-parent="true">
                  <ul class="section-nav">
                    <li class="toc-entry toc-h3"><a href="#example">Example</a></li>
                    <li class="toc-entry toc-h3"><a href="#variations">Variations</a></li>
                    <li class="toc-entry toc-h3"><a href="#sizing">Sizing</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <footer class="px-3 footer bg-white">
          <div class="container ">
            <div class="row align-items-center py-3 border-top">
              <div class="col-lg-6 text-center text-lg-left mb-2 mb-lg-0">
                &copy; 2018 <a href="https://webpixels.io/" target="_blank">Webpixels</a>. All rights reserved.
              </div>
              <div class="col-lg-6 text-center text-lg-right">
                <ul class="nav justify-content-center justify-content-lg-end">
                  <li class="nav-item">
                    <a class="nav-link active" href="https://instagram.com/webpixelsofficial" target="_blank"><i class="fab fa-instagram"></i></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://facebook.com/webpixels" target="_blank"><i class="fab fa-facebook"></i></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://github.com/webpixels" target="_blank"><i class="fab fa-github"></i></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://dribbble.com/webpixels" target="_blank"><i class="fab fa-dribbble"></i></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </footer>
      </section>
    </main>
    <!-- Core -->
    <script src="../assets/vendor/jquery/jquery.min.js"></script>
    <script src="../assets/vendor/popper/popper.min.js"></script>
    <script src="../assets/js/bootstrap/bootstrap.min.js"></script>
    <!-- FontAwesome 5 -->
    <script src="../assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
    <!-- Scripts used only for this demo only - Remove these in your project -->
    <script src="../assets/vendor/jquery-scrollbar/js/jquery-scrollbar.min.js"></script>
    <script src="../assets/vendor/jquery-scrollLock/jquery-scrollLock.min.js"></script>
    <script src="../assets/vendor/sticky-kit/sticky-kit.min.js"></script>
    <script src="../assets/vendor/highlight/js/highlight.min.js"></script>
    <script src="../assets/vendor/clipboard-js/clipboard.min.js"></script>
    <script src="../assets/vendor/holderjs/holder.min.js"></script>
    <script src="../assets/js/demo.js"></script>
    <!-- Theme JS -->
    <script src="../assets/js/theme.js"></script>
  </body>
</html>